<template>
	<view>
		<u-navbar :is-back="false" title="课程"></u-navbar>
		<view class="u-flex u-flex-wrap">
			<u-card :show-head="false" :show-foot="false" :border="false" v-for="(course,index) in courses" :key="index"
				:margin="index%2==0?'10rpx 10rpx 10rpx 30rpx':'10rpx 30rpx 10rpx 10rpx'" style="width: 335rpx;"
				padding="0rpx" @click="clickCourse(course.videoLink)">
				<view class="" slot="body">
					<view class="u-flex-col u-row-left u-col-top">
						<image style="width: 100%;" :src="course.coverLink" mode="widthFix"></image>
						<view class="u-line-1" style="margin: 15rpx;width: calc( 100% - 30rpx);">{{course.courseName}}
						</view>
						<view class="u-line-1 u-font-xs u-tips-color"
							style="margin: 0rpx 15rpx 15rpx 15rpx;width: calc( 100% - 30rpx);">
							<u-tag size="mini" text="教师" type="info" style="margin-right: 10rpx;" />
							{{course.teacher}}
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<u-tabbar :list="$store.state.tabbars" activeColor="#2979ff" mid-button></u-tabbar>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			var [err, res] = await this.$to(this.$api.get({
				url: "/course/list"
			}));
			this.courses = res.data;
		},
		data() {
			return {
				courses: []
			}
		},
		methods: {
			clickCourse(link) {
				uni.navigateTo({
					url: '../main/news',
					success: (res) => {
						res.eventChannel.emit('naviToNews', link)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: $u-bg-color;
	}
</style>
